<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '帮助与反馈',
  },
}
</route>

<template>
  <view class="help-feedback-collapse">
    <wd-collapse v-model="activeNames">
      <wd-collapse-item title="使用帮助" name="1">
        <view class="content-text">查阅相关文章，快速了解如何使用我们的产品和服务。</view>
      </wd-collapse-item>
      <wd-collapse-item title="常见问题解答" name="2">
        <view class="content-text">如果您遇到问题，可以先查看这里，可能会找到快速解决的方法。</view>
      </wd-collapse-item>
      <wd-collapse-item title="提交反馈" name="3">
        <view class="content-text">我们期待您的反馈，您的意见将帮助我们改进产品和服务。</view>
      </wd-collapse-item>
    </wd-collapse>
    <wd-button type="primary" block round @click="openFeedbackForm">提交反馈</wd-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 默认情况下, 打开“使用帮助”部分
const activeNames = ref(['1'])

// 打开用户反馈表格的逻辑处理
const openFeedbackForm = () => {
  // 这里可以引导用户到一个反馈表单页面或者弹出一个反馈窗口
  console.log('用户点击了提交反馈')
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.help-feedback-collapse {
  .wd-collapse {
    margin-bottom: 20px;
  }

  .content-text {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }

  .wd-button {
    margin: 20px;
  }
}
</style>
